{% extends 'base.html' %}

{% block body %}

<!-- ===== Review Submission Section ===== -->
{% if user.is_authenticated %}
<section class="py-5">
  <div class="container col-md-8">
    <div class="card shadow-lg border-0 rounded-4 p-4">
      <h3 class="text-center text-success fw-bold mb-4">
        <i class="bi bi-chat-dots"></i> Write a Review
      </h3>

      <form method="POST" action="/booking" class="row g-3 justify-content-center">
        {% csrf_token %}
        <div class="form-floating mb-3 col-md-8">
          <input
            type="text"
            name="phone"
            id="comment"
            class="form-control shadow-sm"
            placeholder="Write your comment..."
            maxlength="200"
            required
          />
          <label for="comment">Comment</label>
        </div>

        <div class="text-center">
          <button type="submit" class="btn btn-success px-5 py-2 rounded-pill shadow-sm">
            <i class="bi bi-send"></i> Publish
          </button>
        </div>
      </form>
    </div>
  </div>
</section>
{% endif %}

<!-- ===== All Reviews Section ===== -->
<section class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center fw-bold text-success mb-4">
      <i class="bi bi-star-half"></i> Reviews
    </h2>

    {% for r in reviews %}
    <div class="review-card card border-0 shadow-sm mb-4 rounded-4">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h5 class="fw-bold text-success mb-0">
            <i class="bi bi-person-circle"></i> {{ r.name }}
          </h5>
          <small class="text-muted">
            <i class="bi bi-clock"></i> {{ r.created_at }}
          </small>
        </div>
        <p class="text-secondary fs-5 mb-0">{{ r.comment }}</p>
      </div>
    </div>
    {% empty %}
    <div class="text-center mt-4">
      <h5 class="text-muted">
        <i class="bi bi-info-circle"></i> No reviews yet. Be the first to share your thoughts!
      </h5>
    </div>
    {% endfor %}
  </div>
</section>

<!-- ===== Custom CSS ===== -->
<style>
  body {
    background: linear-gradient(135deg, #f8fff8, #ffffff);
  }

  .card {
    transition: all 0.3s ease-in-out;
    border-radius: 15px;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .btn-success {
    font-weight: 600;
    font-size: 1.05rem;
  }

  .form-control {
    border-radius: 12px;
    border: 1px solid #cfcfcf;
  }

  .form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }

  .review-card {
    background-color: #ffffff;
  }

  .review-card:hover {
    background-color: #f1fff5;
  }

  @media (max-width: 768px) {
    .card {
      margin: 0 10px;
    }
  }
</style>

{% endblock body %}